<%@ page language="java"  pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="format-detection" content="telephone=no" />
    <title>约来约美 </title>
    
    <link rel="stylesheet" href="${static_host}style/jquery.mmenu-5.0.3.css?a=1" />
    <link rel="stylesheet" href="${static_host}style/hhframe-1.0.0.css?a=1" />
    <link rel="stylesheet" href="${static_host}style/mobiscroll.css?a=1" />
    <link rel="stylesheet" href="${static_host}style/services.css?a=12" />
    <script src="${static_host}script/jquery-1.11.1.min.js"></script>
    <script src="${static_host}script/jquery.mmenu-5.0.3.js"></script>
    <script src="${static_host}script/jquery.iscroll.5.js"></script>
    <script src="${static_host}script/mobiscroll.js"></script>
    <script src="${static_host}script/hhframe-1.0.0.js"></script>
    <script src="${static_host}script/services.js?a=1312"></script>
</head>
<body>
  
  <div class="framepage services">
    
    <!-- header -->
    <div class="header Searcher">
      <a href="#set_city" class="pos-l hd-city">上海</a>
     	<h1 class="hd-title">
				<div class="fm" >
					<input type="text" class="txt" value="${group.group_name}" id="service_name" placeholder="服务项目名称" /> <input
						type="button" onclick="sendquery()" class="sub" />
				</div>
			</h1>
      <a href="#set_chanel" id="servicelable" class="pos-r">频道</a>
    </div>
    
    <!-- content -->
    <div class="wrapper">
    <div class="content">
    
    
     <ul class="cate">
					<li class="sort " id="defalts" order="comment_count"><a href="javascript:;">综合</a></li>
					<li class="sort "  order="buyer_num"><a href="javascript:;">销量</a></li>
					<li class="sort" order="group_price"><a href="javascript:;">价格</a></li>
					<li class="sort" order="comment_count"><a href="javascript:;">评价</a></li>
					<li><a href="#Filter">筛选</a></li>
				</ul>
    
    <div  id="contenbody">
     <div class="svclist">
        <ul id="servicepanel">

   </ul>
   
       <ul id="servicepanel1">
        <li class="load_more" ><a href="javascript:;" ><p limit="1" class="load" >加载更多</p><p class="state"></p></a></li>
   </ul>
      </div>
     </div>
      
      
    </div>
    </div>
    
<!--     <div class="gotoTop">Top</div> -->
    
    <!-- footer -->
		<jsp:include page="/inc/servicesfooter.jsp" />
    <!-- set city -->
    <div id="set_city">
      <div>
      
      <div class="header">
        <a href="javascript:;" class="pos-l icon hd-return">返回</a>
        <h1 class="hd-title">选择城市</h1>
      </div>
      
      <p class="tips">已开通服务的城市：</p>
      <div class="citys">
      <ul>
      <s:iterator value="#request.are">
      <li value='${area_id}'><a href="javascript:setcity('${area_id}-${area_name}')">${area_name}</a></li>
	</s:iterator>
      </ul>
      </div>
      
      </div>	
    </div>
    
    <!-- set chanel -->
    <div id="set_chanel">
      <div>
      
      <div class="header">
        <a href="javascript:;" class="pos-l icon hd-return">返回</a>
        <h1 class="hd-title">选择频道</h1>
      </div>
      
      <div class="chanels">
<s:iterator value="#request.sclass"   status="i"> 
	<p class="cate ${i.index==0?'hot':'liren'}">${storeclass.class_name}</p>
	 <s:iterator value="list"  var="c"  status="s">
	 <s:if test="#s.first">
	  <ul>
<!-- 	    <li><a href="javascript:;">不限</a></li> -->
	 </s:if>
      <li><a href="javascript:queryclass(${c.class_id},'${c.class_name}');">${c.class_name}</a></li>
      	 <s:if test="#s.last">
      	     
	  </ul>
	 </s:if>
      </s:iterator>
     </s:iterator>
      </div>
      
      </div>
    </div>
    
    <!-- Filter-->
    <div id="Filter">
      <div>
      
      <div class="header">
        <a href="javascript:;" class="pos-l icon hd-return">返回</a>
        <h1 class="hd-title">筛选</h1>
      </div>
      
      <div class="fm">
      
      <label>品牌：</label>
      <input type="hidden" name="" class="brand" value="品牌一" />
      <ul class="selectlist brandlist">
      <li value="0">不限</li>
	<s:iterator value="#request.brand">
						<li value="${brand_id}" >${brand_name}</li>
	</s:iterator>
      </ul>
        <label>价格：</label>
      <div class="price">
	<input type="text" value="${group.minprice}" class="min" placeholder="最小价格" /><span>-</span>
	<input type="text" value="${group.maxprice}"  class="max" placeholder="最大价格" />
      </div>
     <label>区域：</label> <select id="area" class="area">
    					<optgroup  label="不限">
							<option value="0">不限</option>
							</optgroup>			
    					<s:iterator value="#request.aremap">
    					<optgroup label="${key}">
    							<s:iterator value="value">
    							<option parent="${parent_area_id}" value="${area_id}">${area_name}</option>
    							</s:iterator>
						</optgroup>
    					</s:iterator>
			
					</select>  
      
    
      
            <label>商圈：</label>
      <input type="hidden" name="" class="street" value="商圈一" />
      <ul class="selectlist businesslist">
      <li value="0">不限</li>
      <s:iterator value="#request.business">
		<li value="${id}">${name}</li>
	</s:iterator>

      </ul>
      </div>
      
      <div class="btns">
        <a href="javascript:;" class="btn">确定</a>
      </div>
      
      </div>
    </div>
  
  </div>
  	<script src="${static_host}script/laytpl.js"></script>
<script src="${static_host}script/public.js"></script>

	<script id="service" type="text/html">
	{{# for(var i = 0, len = d.length; i < len; i++){ }}
		<li>
          <a href="store!servicesdetail.do?group.group_id={{d[i].group_id}}">
          <img src="{{d[i].group_pic}}" />
          <div>
          <p class="name">{{d[i].group_name}}</p>
          <p class="info"><span>价格：{{d[i].group_price}} 元</span><span>{{d[i].buyer_num}} 人购买</span></p>
          <p class="shop">店铺：{{d[i].store_name}}</p>
          <p class="addr">地址： {{d[i].address}} </p>
          </div>
          </a>
        </li>
{{# } }}
</script>
<script type="text/javascript">
var data=${jsonString};
function rederData(d){
    var gettpl = document.getElementById('service').innerHTML;
    laytpl(gettpl).render(d, function(html){
    	if(d.length==0){
    		//alert("数据全部加载完毕！");
    	}
        $("#servicepanel").append(html);
    
    });

}
if(data.length==0){
	$("#contenbody").html('<div class="NoResult"><img src="icons/noresult.png" /><p>没有符合您的服务</p> </div>')
}else{
	 rederData(data);//渲染数据
}


var query={
    	sort:"asc",//排序的方式
    	orderby:"buyer_num",//排序的字段
    	areid:"", //区域的ID
    	brandid:"${group.brand_id}",//品牌的ID
    	classid:"", //项目类型的ID
    	minprice:"",//价格最小
    	maxprice:"",//最大价格
    	title:"" ,//商铺的名字
    	businessid:"${group.area_business_id}",//商圈的
    	mall_id:"0"//商区的ID
    }

    //开始查询
    function sendquery(){
    	var url="store!services.do?group.sorttype="+query.sort+"&group.orderby="+query.orderby;
    	
    	if($("#service_name").val()!=""){
    		url=url+"&group.group_name="+$("#service_name").val();
    	}
    	
    	if(query.classid!=""){
    		url=url+"&group.class_id="+query.classid;
    	}
    	if(query.brandid!=""){
    		url=url+"&group.brand_id="+query.brandid;
    	}
    	
    	if(query.minprice!="" || query.maxprice!=""){
    		url=url+"&group.minprice="+query.minprice+"&group.maxprice="+query.maxprice;
    	}
    	//商圈查询
    	if(query.businessid!="" || query.businessid!=""){
    		url=url+"&group.area_business_id="+query.businessid;
    	}
    	//行政区域查询
    	if($("#area").val()!="0"){
    		//alert($("#area").val());
    		url=url+"&group.mall_id="+$("#area").val();
    	}
    	//查询全部
    	if($("option:selected").attr("parent")=="0"){
    		url=url+"&group.area_id=1";
    	}
    	
    	 // alert(url);
    	window.location.href=url;
  
    }
    //类型查询
    function classquery(classid,names){
    	tools.set("classid",classid);
    	tools.set("classname",names);
    	query.classid=classid;
    	sendquery();
    }

    //追加选中的
   // alert("${group.orderby}")
    if(""=="${group.orderby}"){
		$("#defalts").addClass("selected ${group.sorttype eq 'asc'?'':'down'}");
    }else{
    	  var obj = $("li[order=${group.orderby}]");
		  obj.addClass("selected ${group.sorttype eq 'asc'?'':'down'}");
    }
  
    function init(){
    	if(window.location.href.indexOf("group.class_id")!=-1){
    		if(tools.get("classname")==null){
        		$("#servicelable").text("全部");
        	}else{
        		$("#servicelable").text(tools.get("classname"));
        	}
        	query.classid=tools.get("classid");
    	}
    	
    	
    }
    init();
    
	function setcity(text){
		$.cookie('city', text, {expires : 365});
		window.location.href="store!services.do";
  }
	
	$(function(){
		//品牌信息
		$(".brandlist li").on("click",function(){
			query.brandid=this.value;
			sendquery();
		})
		//商圈
		$(".businesslist li").on("click",function(){
			//alert(this.value)
			query.businessid=this.value;
			sendquery();
		})
		
		//回填品牌信息
		$(".brandlist li[value=${group.brand_id==null?0:group.brand_id}]").addClass("selected");
		//回填商圈信息
		$(".businesslist li[value=${group.area_business_id==null?0:group.area_business_id}]").addClass("selected");
		//回填行政区域
		$(".area option[value=${group.mall_id==null?0:group.mall_id}]").attr("selected",true);
		
		$("#Filter .area").mobiscroll().select({theme:"android-holo light",group:true});
		if($("#service_name").val()=="不限"){
			$("#service_name").val("")
		}
	})

//=================================
function setcity(text){
	$.cookie('city', text, {expires : 365});
	window.location.href="store!services.do";
}

function queryclass(classid,names){
   	tools.set("classid",classid);
	tools.set("classname",names);
	window.location.href="store!services.do?group.class_id="+classid;
	
}
if(window.location.href.indexOf("group.class_id")!=-1){
	if(tools.get("classname")==null){
		$("#servicelable").text("频道");
	}else{
		$("#servicelable").text(tools.get("classname"));
	}
	query.classid=tools.get("classid");
}
</script>
</body>
</html>